/*eslint-disable */
<template>
    <div>
        <!-- 首页图片 -->
        <img src="../assets/zretc.png" style="max-width: 100%;" />
        <!-- 按钮+应用element-plus图标 -->
        <div style="height: 40px;width: 100;display: flex;align-items: center;justify-content:center;">
            <el-button class="el-button" type="primary" @click=enterBlog()>
                进入我的博客空间<el-icon class="el-icon--right">
                    <ArrowRight style="width: 20px;height: 20px;" />
                </el-icon>
            </el-button>
        </div>
        <!-- 占位div，无内容 -->
        <div style="height: 40px;" />

        <!-- 居中显示热门博文模块 -->
        <div style="height: 450px;width: 100%;display:flex;justify-content: center;">
            <!-- flex布局 四篇热门博文 -->
            <div class="div-blog-group">
                <!-- 热门博文+图标 -->
                <el-text style="width:12%;align-self:flex-start; margin-top: 5px; margin-left: 7px;" tag="b">
                    <el-icon style="width: 15px;height: 15px;color: black;">
                        <GoldMedal style="width: 100%;height: 100%;" />
                    </el-icon>
                    热门博文
                </el-text>
                <!-- 文章内容 -->
                <div v-for="(article,index) in articles" :key="index" class="div-blog" @click="seeArticle(article.id)">
                    <div class="blog">
                        <h4 class="title" tag="b">{{ article.title }}</h4>
                        <!-- 设置line-clamp截断溢出内容 -->
                        <el-text class="article-text" line-clamp="13">
                            {{ article.content }}</el-text>
                    </div>
                </div>
            </div>

            <div class="div-notice-group">
                <!-- 公告+图标 -->
                <el-text style="width:12%;align-self:flex-start; margin-top: 5px; margin-left: 7px;" tag="b">
                    <el-icon style="width: 15px;height: 15px;color: black;">
                        <Bell style="width: 100%;height: 100%;" />
                    </el-icon>
                    公告
                </el-text>
                <!-- 公告内容 -->
                <div index="1" class="div-notice" @click="seeNotice()">
                    <div class="notice">
                        <el-text class="title" tag="b">公告标题</el-text>
                        <!-- 设置line-clamp截断溢出内容 -->
                        <el-text class="article-text" line-clamp="13">
                            公告内容公告内容公告内容公告内容公告内容
                            公告内容公告内容公告内容公告内容公告内容
                            公告内容公告内容公告内容公告内容公告内容</el-text>
                    </div>
                </div>
                <div index="2" class="div-notice" @click="seeNotice()">
                    <div class="notice">
                        <el-text class="title" tag="b">公告标题</el-text>
                        <el-text class="article-text" line-clamp="13">
                            公告内容公告内容公告内容公告内容公告内容
                            公告内容公告内容公告内容公告内容公告内容
                            公告内容公告内容公告内容公告内容公告内容</el-text>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import {
        ArrowRight,
        GoldMedal,
        Bell,
    } from '@element-plus/icons-vue'
    import {
        login,
        getUserId,
        getCurrentUserRole,
        getUserById,
        getHotBlog,
    } from '@/api/index'
    import Cookies from 'js-cookie'
    import {
        ref
    } from 'vue';

    let articles = ref([]);
    const enterBlog = () => {
        window.location.pathname = '/myblog';
    }
    const seeArticle = (id: any) => {
        window.location.href = '/myblog?id=' + id;
    }
    const seeNotice = () => {
        console.log("查看公告")
    }


    login("尹桂英", "ea magna qui anim ullamco").then(
        res => {
            localStorage.setItem('token', res.data.token)
            getUserId().then(
                res => {
                    localStorage.setItem('userId', res.data);
                    getUserById(res.data).then(
                        res => {
                            localStorage.setItem('username', res.data.username)
                            localStorage.setItem('nickname', res.data.nickname)
                        }
                    )
                    getCurrentUserRole().then(
                        res => {
                            localStorage.setItem('userRole', res.data);
                        }
                    )
                }
            )
        })
    getHotBlog().then(
        res => {
            articles.value = res.data;
        }
    )
</script>

<style scoped>
    .el-button {
        color: white;
        background-color: #545c64;
        border-color: #545c64;
        font-size: medium;
        width: 200px;
        height: 40px;
    }

    .el-button:hover {
        background-color: #798591;
        border-color: #545c64;
        color: white;
    }

    .el-icon {
        color: white;
        height: 20px;
        width: 20px;
    }

    .div-blog-group {
        height: 350px;
        width: 40%;
        display: flex;
        align-items: center;
        background-color: lightgrey;
        border-radius: 10px;
        margin: 20px;
    }

    .div-notice-group {
        height: 350px;
        width: 40%;
        display: flex;
        align-items: center;
        background-color: lightgrey;
        border-radius: 10px;
        margin: 20px;
    }

    .div-blog {
        height: 300px;
        width: 35%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        margin: 10px;
    }

    .div-notice {
        height: 300px;
        width: 35%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        margin: 10px;
    }

    .notice {
        height: 270px;
        width: 80%;
        background-color: azure;
    }

    .blog {
        height: 270px;
        border-radius: 10px;
        width: 90%;
        background-color: azure;
    }

    .title {
        margin-top: 3px;
        margin-bottom: 7px
    }

    .article-text {
        height: 235px;
        overflow: hidden;
    }
</style>